<template>
  <div class="dashboard-container">
    <!-- 页面头部 -->
    <div v-if="!hideHeader" class="page-header animate-fade-in">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">仪表盘</h1>
          <p class="page-description">欢迎回来，这里是您的项目概览</p>
        </div>
        <div class="header-right">
          <el-select
            v-model="selectedProjectId"
            placeholder="选择项目（全部）"
            clearable
            filterable
            class="project-select"
            @change="handleProjectChange"
            style="width: 250px; margin-right: 12px;"
          >
            <el-option
              label="全部项目"
              value=""
            />
            <el-option
              v-for="project in projectList"
              :key="project.id"
              :label="project.name"
              :value="project.id"
            />
          </el-select>
          <el-button type="primary" class="refresh-btn glass-effect" @click="refreshData" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 当隐藏头部时，显示项目选择器 -->
    <div v-if="hideHeader" class="dashboard-header-bar">
      <el-select
        v-model="selectedProjectId"
        placeholder="选择项目（全部）"
        clearable
        filterable
        class="project-select"
        @change="handleProjectChange"
        style="width: 250px; margin-right: 12px;"
      >
        <el-option
          label="全部项目"
          value=""
        />
        <el-option
          v-for="project in projectList"
          :key="project.id"
          :label="project.name"
          :value="project.id"
        />
      </el-select>
      <el-button type="primary" @click="refreshData" :loading="loading">
        <el-icon><Refresh /></el-icon>
        刷新数据
      </el-button>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="16">
        <el-col 
          :xs="24" :sm="12" :md="4" :lg="4"
          v-for="(stat, index) in statsConfig" 
          :key="index"
          class="animate-fade-in"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <el-card class="stats-card glass-card hover-lift" :class="`stats-card-${index}`">
            <el-skeleton :loading="loading" animated>
              <template #template>
                <div class="stats-skeleton">
                  <el-skeleton-item variant="circle" style="width: 48px; height: 48px" />
                  <div class="stats-skeleton-info">
                    <el-skeleton-item variant="h3" style="width: 50%" />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
              <template #default>
                <div class="stats-content">
                  <div class="stats-icon-wrapper" :class="stat.iconClass">
                    <el-icon><component :is="stat.icon" /></el-icon>
                  </div>
                  <div class="stats-info">
                    <div class="stats-number counter">{{ stat.value }}<span v-if="stat.suffix" class="suffix">{{ stat.suffix }}</span></div>
                    <div class="stats-label">{{ stat.label }}</div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <el-row :gutter="24">
        <!-- 项目状态分布 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8" class="animate-fade-in" style="animation-delay: 0.5s">
          <el-card class="chart-card glass-card">
            <template #header>
              <div class="card-header">
                <span class="header-title">项目状态分布</span>
                <el-button type="text" class="icon-btn" @click="refreshProjectStats">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div class="chart-container">
              <el-skeleton :loading="chartsLoading.projectStatus" animated style="width: 100%; height: 300px">
                <template #template>
                  <div class="chart-skeleton"></div>
                </template>
                <template #default>
                  <div style="width: 100%; height: 300px; min-width: 200px">
                    <v-chart
                      v-if="!chartsLoading.projectStatus"
                      :option="projectStatusOption"
                      autoresize
                      style="width: 100%; height: 300px"
                    />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </el-card>
        </el-col>

        <!-- 任务优先级分布 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8" class="animate-fade-in" style="animation-delay: 0.6s">
          <el-card class="chart-card glass-card">
            <template #header>
              <div class="card-header">
                <span class="header-title">任务状态分布</span>
                <el-button type="text" class="icon-btn" @click="refreshTaskStats">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div class="chart-container">
              <el-skeleton :loading="chartsLoading.taskPriority" animated style="width: 100%; height: 300px">
                <template #template>
                  <div class="chart-skeleton"></div>
                </template>
                <template #default>
                  <div style="width: 100%; height: 300px; min-width: 200px">
                    <v-chart
                      v-if="!chartsLoading.taskPriority"
                      :option="taskPriorityOption"
                      autoresize
                      style="width: 100%; height: 300px"
                    />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </el-card>
        </el-col>

        <!-- 需求状态分布 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <el-card class="chart-card glass-card">
            <template #header>
              <div class="card-header">
                <span class="header-title">需求状态分布</span>
                <el-button type="text" class="icon-btn" @click="refreshRequirementStats">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div class="chart-container">
              <el-skeleton :loading="chartsLoading.requirementStatus" animated style="width: 100%; height: 300px">
                <template #template>
                  <div class="chart-skeleton"></div>
                </template>
                <template #default>
                  <div style="width: 100%; height: 300px; min-width: 200px">
                    <v-chart
                      v-if="!chartsLoading.requirementStatus"
                      :option="requirementStatusOption"
                      autoresize
                      style="width: 100%; height: 300px"
                    />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </el-card>
        </el-col>

        <!-- 项目进度趋势 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="chart-card glass-card progress-trend-card">
            <template #header>
              <div class="card-header">
                <span class="header-title">项目进度趋势</span>
                <el-button type="text" class="icon-btn" @click="refreshProgressTrend">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div class="chart-container progress-trend-container">
              <el-skeleton :loading="chartsLoading.progressTrend" animated style="width: 100%; height: 350px">
                <template #template>
                  <div class="chart-skeleton"></div>
                </template>
                <template #default>
                  <div style="width: 100%; height: 350px; min-width: 200px">
                    <v-chart
                      v-if="!chartsLoading.progressTrend"
                      :option="progressTrendOption"
                      autoresize
                      class="progress-trend-chart"
                      style="width: 100%; height: 350px"
                    />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </el-card>
        </el-col>

        <!-- 工作负载分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="chart-card glass-card">
            <template #header>
              <div class="card-header">
                <span class="header-title">工作负载分布</span>
                <el-button type="text" class="icon-btn" @click="refreshWorkload">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div class="chart-container">
              <el-skeleton :loading="chartsLoading.workload" animated style="width: 100%; height: 300px">
                <template #template>
                  <div class="chart-skeleton"></div>
                </template>
                <template #default>
                  <div style="width: 100%; height: 300px; min-width: 200px">
                    <v-chart
                      v-if="!chartsLoading.workload"
                      :option="workloadOption"
                      autoresize
                      style="width: 100%; height: 300px"
                    />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </el-card>
        </el-col>

        <!-- 项目健康度 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="chart-card glass-card">
            <template #header>
              <div class="card-header">
                <span class="header-title">项目健康度</span>
                <el-button type="text" class="icon-btn" @click="refreshProjectHealth">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div class="chart-container">
              <el-skeleton :loading="chartsLoading.projectHealth" animated style="width: 100%; height: 300px">
                <template #template>
                  <div class="chart-skeleton"></div>
                </template>
                <template #default>
                  <div style="width: 100%; height: 300px; min-width: 200px">
                    <v-chart
                      v-if="!chartsLoading.projectHealth"
                      :option="projectHealthOption"
                      autoresize
                      style="width: 100%; height: 300px"
                    />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 需求、缺陷和版本统计 -->
    <el-row :gutter="24">
      <!-- 缺陷统计 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="chart-card glass-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">缺陷统计</span>
              <el-button type="text" class="icon-btn" @click="refreshDefectStats">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <el-skeleton :loading="chartsLoading.defectStats" animated style="width: 100%; height: 300px">
              <template #template>
                <div class="chart-skeleton"></div>
              </template>
              <template #default>
                <div style="width: 100%; height: 300px; min-width: 200px">
                  <v-chart
                    v-if="!chartsLoading.defectStats"
                    :option="defectStatsOption"
                    autoresize
                    style="width: 100%; height: 300px"
                  />
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
      </el-col>

      <!-- 版本统计 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="chart-card glass-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">版本统计</span>
              <el-button type="text" class="icon-btn" @click="refreshVersionStats">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <el-skeleton :loading="chartsLoading.versionStats" animated style="width: 100%; height: 300px">
              <template #template>
                <div class="chart-skeleton"></div>
              </template>
              <template #default>
                <div style="width: 100%; height: 300px; min-width: 200px">
                  <v-chart
                    v-if="!chartsLoading.versionStats"
                    :option="versionStatsOption"
                    autoresize
                    style="width: 100%; height: 300px"
                  />
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
      </el-col>
      
      <!-- 版本缺陷分布详情 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" v-if="dashboardData.versionDefectDistribution.length > 0">
        <el-card class="chart-card glass-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">版本缺陷分布</span>
              <el-button type="text" class="icon-btn" @click="refreshVersionStats">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <el-skeleton :loading="chartsLoading.versionStats" animated style="width: 100%; height: 300px">
              <template #template>
                <div class="chart-skeleton"></div>
              </template>
              <template #default>
                <div style="width: 100%; height: 300px; min-width: 200px">
                  <v-chart
                    v-if="!chartsLoading.versionStats"
                    :option="versionDefectDistributionOption"
                    autoresize
                    style="width: 100%; height: 300px"
                  />
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 个人仪表盘和最近活动 -->
    <el-row :gutter="24">
      <!-- 个人仪表盘 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="personal-dashboard-card glass-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">个人仪表盘</span>
              <el-button type="text" class="icon-btn" @click="refreshPersonalDashboard">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="personal-dashboard-content">
            <el-skeleton :loading="personalDashboardLoading" animated :rows="5">
              <template #default>
                <!-- 我的任务统计 -->
                <div class="personal-stats-group">
                  <h4 class="group-title">我的任务</h4>
                  <div class="stats-grid">
                    <div class="stat-box">
                      <div class="stat-value primary">{{ myDashboardData.my_tasks.total }}</div>
                      <div class="stat-label">总计</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value warning">{{ myDashboardData.my_tasks.todo }}</div>
                      <div class="stat-label">待办</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value info">{{ myDashboardData.my_tasks.in_progress }}</div>
                      <div class="stat-label">进行中</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value success">{{ myDashboardData.my_tasks.done }}</div>
                      <div class="stat-label">已完成</div>
                    </div>
                  </div>
                </div>

                <!-- 我的缺陷统计 -->
                <div class="personal-stats-group">
                  <h4 class="group-title">我的缺陷</h4>
                  <div class="stats-grid three-cols">
                    <div class="stat-box">
                      <div class="stat-value danger">{{ myDashboardData.my_defects.assigned }}</div>
                      <div class="stat-label">分配给我</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value info">{{ myDashboardData.my_defects.reported }}</div>
                      <div class="stat-label">我报告的</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value warning">{{ myDashboardData.my_defects.open }}</div>
                      <div class="stat-label">待处理</div>
                    </div>
                  </div>
                </div>

                <!-- 我的需求统计 -->
                <div class="personal-stats-group">
                  <h4 class="group-title">我的需求</h4>
                  <div class="stats-grid">
                    <div class="stat-box">
                      <div class="stat-value primary">{{ myDashboardData.my_requirements.total }}</div>
                      <div class="stat-label">总计</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value warning">{{ myDashboardData.my_requirements.pending }}</div>
                      <div class="stat-label">待处理</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value info">{{ myDashboardData.my_requirements.in_progress }}</div>
                      <div class="stat-label">进行中</div>
                    </div>
                    <div class="stat-box">
                      <div class="stat-value success">{{ myDashboardData.my_requirements.completed }}</div>
                      <div class="stat-label">已完成</div>
                    </div>
                  </div>
                </div>

                <!-- 我的项目 -->
                <div class="personal-stats-group">
                  <h4 class="group-title">我的项目</h4>
                  <div class="project-list">
                    <div 
                      v-for="project in myDashboardData.my_projects.slice(0, 3)" 
                      :key="project.id"
                      class="project-item glass-effect-sm"
                    >
                      <span class="project-name">{{ project.name }}</span>
                      <el-tag 
                        :type="project.status === 'active' ? 'success' : 'info'"
                        size="small"
                        effect="dark"
                        class="status-tag"
                      >
                        {{ project.status === 'active' ? '进行中' : '已完成' }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
      </el-col>

      <!-- 最近活动 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="activity-card glass-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">最近活动</span>
              <el-button type="text" class="icon-btn" @click="refreshActivities">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <el-skeleton :loading="loading" animated :rows="5">
            <template #default>
              <div class="timeline-container">
                <el-timeline>
                  <el-timeline-item
                    v-for="activity in recentActivities"
                    :key="activity.id"
                    :timestamp="formatDate(activity.created_at)"
                    :type="getActivityType(activity.type) as 'primary' | 'success' | 'warning' | 'danger' | 'info'"
                    :hollow="true"
                  >
                    <div class="activity-content glass-effect-sm">
                      <div class="activity-title">{{ activity.title }}</div>
                      <div class="activity-type-badge">{{ getActivityLabel(activity.type) }}</div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'

// Props
interface Props {
  hideHeader?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  hideHeader: false
})

// 使用 props，避免 lint 警告
const { hideHeader } = props
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import {
  Refresh,
  FolderOpened,
  List,
  CircleCheck,
  Warning,
  UserFilled
} from '@element-plus/icons-vue'
import { 
  getDashboardOverview, 
  getRecentActivities, 
  getWorkloadDistribution,
  getProjectHealth,
  getTaskProgress,
  getMyDashboard,
  transformDashboardData,
  type DashboardStats,
  type DashboardOverviewResponse,
  type RecentActivity,
  type WorkloadDistribution,
  type ProjectHealth,
  type TaskProgressData,
  type MyDashboardData
} from '@/api/dashboard'
import { getProjectList, type ProjectResponse } from '@/api/project'
import { ResponseParser } from '@/utils/responseParser'

// 注册ECharts组件
use([
  CanvasRenderer,
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 响应式数据
const loading = ref(false)
const personalDashboardLoading = ref(false)

// 项目筛选
const selectedProjectId = ref<string>('')
const projectList = ref<ProjectResponse[]>([])
const loadingProjects = ref(false)

// 图表加载状态
const chartsLoading = reactive({
  projectStatus: true,
  taskPriority: true,
  progressTrend: true,
  workload: true,
  projectHealth: true,
  defectStats: true,
  versionStats: true,
  requirementStatus: true
})

// 仪表盘数据
const dashboardData = reactive<DashboardStats>({
  totalProjects: 0,
  totalTasks: 0,
  totalUsers: 0,
  completionRate: 0,
  activeProjects: 0,
  completedProjects: 0,
  pendingTasks: 0,
  completedTasks: 0,
  inProgressTasks: 0,
  myTotalTasks: 0,
  myPendingTasks: 0,
  myInProgressTasks: 0,
  myCompletedTasks: 0,
  totalDefects: 0,
  openDefects: 0,
  resolvedDefects: 0,
  closedDefects: 0,
  totalRequirements: 0,
  planningRequirements: 0,
  activeRequirements: 0,
  completedRequirements: 0,
  onHoldRequirements: 0,
  cancelledRequirements: 0,
  totalVersions: 0,
  activeVersions: 0,
  versionDefectDistribution: [],
  totalMembers: 0
})

// 统计卡片配置
const statsConfig = computed(() => [
  {
    label: '总项目数',
    value: dashboardData.totalProjects,
    icon: FolderOpened,
    iconClass: 'icon-blue'
  },
  {
    label: '项目成员',
    value: dashboardData.totalMembers,
    icon: UserFilled,
    iconClass: 'icon-cyan'
  },
  {
    label: '总任务数',
    value: dashboardData.totalTasks,
    icon: List,
    iconClass: 'icon-purple'
  },
  {
    label: '完成率',
    value: dashboardData.completionRate,
    suffix: '%',
    icon: CircleCheck,
    iconClass: 'icon-green'
  },
  {
    label: '需求总数',
    value: dashboardData.totalRequirements,
    icon: List,
    iconClass: 'icon-blue'
  },
  {
    label: '缺陷总数',
    value: dashboardData.totalDefects,
    icon: Warning,
    iconClass: 'icon-red'
  }
])

// 最近活动
const recentActivities = ref<RecentActivity[]>([])

// 工作负载分布数据
const workloadData = ref<WorkloadDistribution[]>([])

// 项目健康度数据
const projectHealthData = ref<ProjectHealth[]>([])

// 任务进度趋势数据
const taskProgressData = ref<TaskProgressData[]>([])

// 个人仪表盘数据
const myDashboardData = reactive<MyDashboardData>({
  my_tasks: {
    total: 0,
    todo: 0,
    in_progress: 0,
    done: 0,
    overdue: 0
  },
  my_defects: {
    assigned: 0,
    reported: 0,
    open: 0
  },
  my_requirements: {
    total: 0,
    pending: 0,
    in_progress: 0,
    completed: 0,
    cancelled: 0
  },
  my_projects: [],
  recent_tasks: [],
  upcoming_tasks: []
})

// 通用图表配置基础
const getBaseChartOption = () => ({
  backgroundColor: 'transparent',
  textStyle: {
    fontFamily: 'Inter, sans-serif',
    color: '#e2e8f0'
  }
})

// 项目状态分布图表配置
const projectStatusOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)',
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  legend: {
    bottom: '0%',
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: { color: '#94a3b8' }
  },
  series: [
    {
      name: '项目状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: 8,
        borderColor: '#1e293b',
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: dashboardData.activeProjects, name: '进行中', itemStyle: { color: '#60a5fa' } },
        { value: dashboardData.completedProjects, name: '已完成', itemStyle: { color: '#34d399' } }
      ]
    }
  ]
}))

// 任务状态分布图表配置
const taskPriorityOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)',
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  legend: {
    bottom: '0%',
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: { color: '#94a3b8' }
  },
  series: [
    {
      name: '任务状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: 8,
        borderColor: '#1e293b',
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: dashboardData.pendingTasks, name: '待办', itemStyle: { color: '#fbbf24' } },
        { value: dashboardData.inProgressTasks, name: '进行中', itemStyle: { color: '#60a5fa' } },
        { value: dashboardData.completedTasks, name: '已完成', itemStyle: { color: '#34d399' } }
      ]
    }
  ]
}))

// 需求状态分布图表配置
const requirementStatusOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)',
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  legend: {
    bottom: '0%',
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: { color: '#94a3b8' }
  },
  series: [
    {
      name: '需求状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: 8,
        borderColor: '#1e293b',
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: dashboardData.planningRequirements, name: '规划中', itemStyle: { color: '#94a3b8' } },
        { value: dashboardData.activeRequirements, name: '进行中', itemStyle: { color: '#60a5fa' } },
        { value: dashboardData.completedRequirements, name: '已完成', itemStyle: { color: '#34d399' } },
        { value: dashboardData.onHoldRequirements, name: '挂起', itemStyle: { color: '#fbbf24' } },
        { value: dashboardData.cancelledRequirements, name: '已取消', itemStyle: { color: '#fb7185' } }
      ]
    }
  ]
}))

// 项目进度趋势图表配置
const progressTrendOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  legend: {
    top: 0,
    right: 10,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: { color: '#94a3b8' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: taskProgressData.value.map(item => item.date),
    axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
    axisLabel: { color: '#94a3b8' }
  },
  yAxis: {
    type: 'value',
    splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255, 0.05)' } },
    axisLabel: { color: '#94a3b8' }
  },
  series: [
    {
      name: '待办任务',
      type: 'line',
      smooth: true,
      showSymbol: false,
      data: taskProgressData.value.map(item => item.created_count),
      itemStyle: { color: '#fbbf24' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: 'rgba(251, 191, 36, 0.3)' }, { offset: 1, color: 'rgba(251, 191, 36, 0)' }]
        }
      }
    },
    {
      name: '进行中任务',
      type: 'line',
      smooth: true,
      showSymbol: false,
      data: taskProgressData.value.map(item => item.created_count - item.completed_count),
      itemStyle: { color: '#60a5fa' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: 'rgba(96, 165, 250, 0.3)' }, { offset: 1, color: 'rgba(96, 165, 250, 0)' }]
        }
      }
    }
  ]
}))

// 工作负载分布图表配置
const workloadOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: workloadData.value.map(item => item.name || item.username),
    axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
    axisLabel: { color: '#94a3b8', interval: 0, rotate: 30 }
  },
  yAxis: {
    type: 'value',
    splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255, 0.05)' } },
    axisLabel: { color: '#94a3b8' }
  },
  series: [
    {
      name: '任务数',
      type: 'bar',
      barWidth: '40%',
      data: workloadData.value.map(item => item.total_tasks),
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: '#c084fc' }, { offset: 1, color: '#a855f7' }]
        },
        borderRadius: [4, 4, 0, 0]
      }
    }
  ]
}))

// 项目健康度图表配置
const projectHealthOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255, 0.05)' } },
    axisLabel: { color: '#94a3b8' }
  },
  yAxis: {
    type: 'category',
    data: projectHealthData.value.map(item => item.project_name),
    axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
    axisLabel: { color: '#94a3b8', width: 100, overflow: 'truncate' }
  },
  series: [
    {
      name: '完成率',
      type: 'bar',
      data: projectHealthData.value.map(item => item.task_completion_rate),
      itemStyle: {
        color: function(params: any) {
          const value = params.value
          if (value >= 80) return '#34d399'
          if (value >= 50) return '#60a5fa'
          return '#fb7185'
        },
        borderRadius: [0, 4, 4, 0]
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{c}%',
        color: '#94a3b8'
      }
    }
  ]
}))

// 缺陷统计图表配置
const defectStatsOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)',
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  legend: {
    bottom: '0%',
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: { color: '#94a3b8' }
  },
  series: [
    {
      name: '缺陷状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: 8,
        borderColor: '#1e293b',
        borderWidth: 2
      },
      label: { show: false },
      data: [
        { value: dashboardData.openDefects, name: '待修复', itemStyle: { color: '#fb7185' } },
        { value: dashboardData.resolvedDefects, name: '已修复', itemStyle: { color: '#34d399' } },
        { value: dashboardData.closedDefects, name: '已关闭', itemStyle: { color: '#94a3b8' } }
      ]
    }
  ]
}))

// 版本统计图表配置
const versionStatsOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)',
    backgroundColor: 'rgba(30, 41, 59, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: { color: '#e2e8f0' }
  },
  legend: {
    bottom: '0%',
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: { color: '#94a3b8' }
  },
  series: [
    {
      name: '版本状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: 8,
        borderColor: '#1e293b',
        borderWidth: 2
      },
      label: { show: false },
      data: [
        { value: dashboardData.activeVersions, name: '进行中', itemStyle: { color: '#60a5fa' } },
        { value: dashboardData.totalVersions - dashboardData.activeVersions, name: '已发布', itemStyle: { color: '#34d399' } }
      ]
    }
  ]
}))

// 版本缺陷分布图表配置
const versionDefectDistributionOption = computed(() => ({
  ...getBaseChartOption(),
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#e4e7ed',
    textStyle: { color: '#303133' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: dashboardData.versionDefectDistribution.map(item => item.version),
    axisLine: { lineStyle: { color: '#E4E7ED' } },
    axisLabel: { color: '#909399' }
  },
  yAxis: {
    type: 'value',
    splitLine: { lineStyle: { type: 'dashed', color: '#E4E7ED' } },
    axisLabel: { color: '#909399' }
  },
  series: [
    {
      name: '缺陷数',
      type: 'bar',
      barWidth: '40%',
      data: dashboardData.versionDefectDistribution.map(item => item.total_defects),
      itemStyle: {
        color: '#F56C6C',
        borderRadius: [4, 4, 0, 0]
      }
    }
  ]
}))

// 获取活动类型样式
const getActivityType = (type: string) => {
  const map: Record<string, string> = {
    'create': 'success',
    'update': 'primary',
    'delete': 'danger',
    'comment': 'warning',
    'other': 'info'
  }
  return map[type] || 'info'
}

// 获取活动类型标签
const getActivityLabel = (type: string) => {
  const map: Record<string, string> = {
    'task': '任务',
    'defect': '缺陷',
    'requirement': '需求',
    'project': '项目',
    'user': '用户'
  }
  return map[type] || type
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取项目列表
const loadProjects = async () => {
  loadingProjects.value = true
  try {
    const res = await getProjectList({ 
      size: 1000,
      is_archived: false 
    })
    projectList.value = res.items || []
  } catch (error) {
    console.error('获取项目列表失败:', error)
    ElMessage.error('获取项目列表失败')
  } finally {
    loadingProjects.value = false
  }
}

// 处理项目选择变化
const handleProjectChange = () => {
  refreshData()
}

// 刷新数据方法
const refreshData = async () => {
  loading.value = true
  const projectId = selectedProjectId.value || undefined
  try {
    const [overviewRes, activitiesRes, myDashboardRes] = await Promise.all([
      getDashboardOverview(projectId),
      getRecentActivities(20, projectId),
      getMyDashboard()
    ])
    
    const overviewParsed = ResponseParser.parseResponse<DashboardOverviewResponse>(overviewRes)
    if (overviewParsed.success && overviewParsed.data) {
      Object.assign(dashboardData, transformDashboardData(overviewParsed.data))
      chartsLoading.projectStatus = false
      chartsLoading.taskPriority = false
      chartsLoading.defectStats = false
      chartsLoading.versionStats = false
      chartsLoading.requirementStatus = false
    }
    
    const activitiesParsed = ResponseParser.parseResponse<RecentActivity[]>(activitiesRes)
    if (activitiesParsed.success && activitiesParsed.data) {
      recentActivities.value = activitiesParsed.data
    }
    
    const myDashboardParsed = ResponseParser.parseResponse<MyDashboardData>(myDashboardRes)
    if (myDashboardParsed.success && myDashboardParsed.data) {
      Object.assign(myDashboardData, myDashboardParsed.data)
    }
    
    // 刷新各个图表
    await Promise.all([
      refreshWorkload(),
      refreshProjectHealth(),
      refreshProgressTrend()
    ])
    
    ElMessage.success('数据已更新')
  } catch (error) {
    console.error('刷新数据失败:', error)
    ElMessage.error('刷新数据失败')
  } finally {
    loading.value = false
  }
}

const refreshProjectStats = async () => {
  chartsLoading.projectStatus = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getDashboardOverview(projectId)
    const parsed = ResponseParser.parseResponse<DashboardOverviewResponse>(res)
    if (parsed.success && parsed.data) {
      Object.assign(dashboardData, transformDashboardData(parsed.data))
    }
  } catch (error) {
    console.error('获取项目统计失败:', error)
  } finally {
    chartsLoading.projectStatus = false
  }
}

const refreshTaskStats = async () => {
  chartsLoading.taskPriority = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getDashboardOverview(projectId)
    const parsed = ResponseParser.parseResponse<DashboardOverviewResponse>(res)
    if (parsed.success && parsed.data) {
      Object.assign(dashboardData, transformDashboardData(parsed.data))
    }
  } catch (error) {
    console.error('获取任务统计失败:', error)
  } finally {
    chartsLoading.taskPriority = false
  }
}

const refreshProgressTrend = async () => {
  chartsLoading.progressTrend = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getTaskProgress(projectId)
    const parsed = ResponseParser.parseResponse<TaskProgressData[]>(res)
    if (parsed.success && parsed.data) {
      taskProgressData.value = parsed.data
    }
  } catch (error) {
    console.error('获取任务进度失败:', error)
  } finally {
    chartsLoading.progressTrend = false
  }
}

const refreshWorkload = async () => {
  chartsLoading.workload = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getWorkloadDistribution(projectId)
    const parsed = ResponseParser.parseResponse<WorkloadDistribution[]>(res)
    if (parsed.success && parsed.data) {
      workloadData.value = parsed.data
    }
  } catch (error) {
    console.error('获取工作负载失败:', error)
  } finally {
    chartsLoading.workload = false
  }
}

const refreshProjectHealth = async () => {
  chartsLoading.projectHealth = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getProjectHealth(projectId)
    const parsed = ResponseParser.parseResponse<ProjectHealth[]>(res)
    if (parsed.success && parsed.data) {
      projectHealthData.value = parsed.data
    }
  } catch (error) {
    console.error('获取项目健康度失败:', error)
  } finally {
    chartsLoading.projectHealth = false
  }
}

const refreshDefectStats = async () => {
  chartsLoading.defectStats = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getDashboardOverview(projectId)
    const parsed = ResponseParser.parseResponse<DashboardOverviewResponse>(res)
    if (parsed.success && parsed.data) {
      Object.assign(dashboardData, transformDashboardData(parsed.data))
    }
  } catch (error) {
    console.error('获取缺陷统计失败:', error)
  } finally {
    chartsLoading.defectStats = false
  }
}

const refreshVersionStats = async () => {
  chartsLoading.versionStats = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getDashboardOverview(projectId)
    const parsed = ResponseParser.parseResponse<DashboardOverviewResponse>(res)
    if (parsed.success && parsed.data) {
      Object.assign(dashboardData, transformDashboardData(parsed.data))
    }
  } catch (error) {
    console.error('获取版本统计失败:', error)
  } finally {
    chartsLoading.versionStats = false
  }
}

const refreshRequirementStats = async () => {
  chartsLoading.requirementStatus = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getDashboardOverview(projectId)
    const parsed = ResponseParser.parseResponse<DashboardOverviewResponse>(res)
    if (parsed.success && parsed.data) {
      Object.assign(dashboardData, transformDashboardData(parsed.data))
    }
  } catch (error) {
    console.error('获取需求统计失败:', error)
  } finally {
    chartsLoading.requirementStatus = false
  }
}

const refreshPersonalDashboard = async () => {
  personalDashboardLoading.value = true
  try {
    const res = await getMyDashboard()
    const parsed = ResponseParser.parseResponse<MyDashboardData>(res)
    if (parsed.success && parsed.data) {
      Object.assign(myDashboardData, parsed.data)
    }
  } catch (error) {
    console.error('获取个人仪表盘失败:', error)
  } finally {
    personalDashboardLoading.value = false
  }
}

const refreshActivities = async () => {
  loading.value = true
  try {
    const projectId = selectedProjectId.value || undefined
    const res = await getRecentActivities(20, projectId)
    const parsed = ResponseParser.parseResponse<RecentActivity[]>(res)
    if (parsed.success && parsed.data) {
      recentActivities.value = parsed.data
    }
  } catch (error) {
    console.error('获取最近活动失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化
onMounted(async () => {
  await loadProjects()
  refreshData()
})
</script>

<style scoped>
/* 仪表盘保持暗色背景，不受主题影响 */
.dashboard-container {
  padding: 24px;
  background: #0f172a !important;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-image: 
    radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.15) 0px, transparent 50%) !important;
  background-attachment: fixed;
  color: #e2e8f0 !important;
}

/* 自定义滚动条样式 */
.dashboard-container::-webkit-scrollbar {
  width: 8px;
}

.dashboard-container::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
}

.dashboard-container::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.3);
  border-radius: 4px;
  transition: background 0.3s;
}

.dashboard-container::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.5);
}

/* 玻璃拟态效果 - 深色模式 */
.glass-effect {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.glass-effect-sm {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transition: 0.5s;
}

.glass-card:hover::after {
  left: 100%;
}

.glass-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 3D Stats Card Effect */
.stats-card {
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.stats-card:hover {
  transform: translateY(-5px) rotateX(2deg);
}

/* 页面头部 */
.dashboard-header-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-header {
  margin-bottom: 32px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
  letter-spacing: -0.5px;
}

.page-description {
  color: #94a3b8;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.refresh-btn {
  border-radius: 24px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  color: #60a5fa;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(96, 165, 250, 0.3);
  backdrop-filter: blur(10px);
}

.refresh-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

.project-select {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
}

.project-select :deep(.el-input__wrapper) {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(96, 165, 250, 0.3);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.1);
}

.project-select :deep(.el-input__wrapper:hover) {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
}

.project-select :deep(.el-input__inner) {
  color: #e2e8f0;
}

.project-select :deep(.el-select__placeholder) {
  color: #94a3b8;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 40px;
}

.stats-card-0 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%); 
  color: #34d399; 
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}
.stats-card-0 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%); 
  color: #60a5fa; 
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}
.stats-card-1 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(8, 145, 178, 0.1) 100%); 
  color: #22d3ee; 
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}
.stats-card-2 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%); 
  color: #a78bfa; 
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}
.stats-card-3 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%); 
  color: #34d399; 
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}
.stats-card-4 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%); 
  color: #60a5fa; 
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}
.stats-card-5 .stats-icon-wrapper { 
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%); 
  color: #f87171; 
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.stats-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-right: 20px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-card:hover .stats-icon-wrapper {
  transform: scale(1.15) rotate(5deg);
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 32px;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.2;
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stats-label {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.suffix {
  font-size: 16px;
  margin-left: 4px;
  color: #64748b;
  font-weight: 600;
}

/* 图表卡片 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: #e2e8f0;
  position: relative;
  padding-left: 16px;
  letter-spacing: 0.5px;
}

.header-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.icon-btn {
  color: #64748b;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s;
}

.icon-btn:hover {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
  transform: rotate(180deg);
}

.chart-container {
  padding: 20px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 12px;
}

/* 个人仪表盘 */
.personal-stats-group {
  margin-bottom: 24px;
}

.group-title {
  font-size: 15px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stats-grid.three-cols {
  grid-template-columns: repeat(3, 1fr);
}

.stat-box {
  background: rgba(30, 41, 59, 0.4);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
}

.stat-box:hover {
  background: rgba(30, 41, 59, 0.8);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stat-value.primary { color: #60a5fa; }
.stat-value.success { color: #34d399; }
.stat-value.warning { color: #fbbf24; }
.stat-value.danger { color: #fb7185; }
.stat-value.info { color: #94a3b8; }

.stat-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

/* 项目列表 */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.3s;
}

.project-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(6px);
  border-color: rgba(255, 255, 255, 0.1);
}

.project-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: 15px;
}

/* 时间轴 */
.timeline-container {
  padding: 10px 20px 10px 0;
  max-height: 650px;
  overflow-y: auto;
}

.timeline-container::-webkit-scrollbar {
  width: 6px;
}

.timeline-container::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-track {
  background: transparent;
}

.activity-content {
  padding: 16px;
  border-radius: 16px;
  margin-top: 8px;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
}

.activity-content:hover {
  background: rgba(30, 41, 59, 0.8);
}

.activity-title {
  font-size: 15px;
  color: #e2e8f0;
  margin-bottom: 6px;
  font-weight: 500;
}

.activity-type-badge {
  display: inline-block;
  font-size: 12px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 骨架屏样式 - 深色适配 */
.stats-skeleton {
  display: flex;
  align-items: center;
  padding: 24px;
}

.stats-skeleton-info {
  flex: 1;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chart-skeleton {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 37%, rgba(255,255,255,0.05) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 12px;
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 动画 */
.animate-fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .header-right {
    width: 100%;
  }
  
  .refresh-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>